<template>
    <div style="height: 100%">
        <navbar :title="$t('announce_detail')"></navbar><!--公告详情-->
        <div class="content-noBottom white-bg" style="overflow: auto;" :style="{'padding-bottom' : detail.detail && detail.msgReceipt === 1 ? '56px' : '0'}">
            <div v-if="detail">
                <div class="detail-title">
                    {{detail.msgTitle}}
                </div>
                <div style="padding: 40px 15px 90px;">
                    <p class="html-container" v-html="$xss(htmlFilter(detail.msgBody))"></p>
                </div>
            </div>
        </div>
        <div class="detail-btnRead" v-if="detail && detail.msgReceipt === 1">
            <div @click="sendFreshReceipt()" v-if="detail.isRead === 0">
                {{ $t("announce_readed_01") }}<!--我已阅读该公告-->
            </div>
            <div class="cur" v-if="detail.isRead === 1">
                {{ $t("announce_readed_02") }}<!--已阅读-->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AnnounceDetail',
    components: {},
    data() {
        return {
            detail: {},
            tcenter: ''
        };
    },
    methods: {
        getFreshAnnounceDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/announce/detail/${this.$route.params.id}`
            }).then(res => {
                this.detail = res.data;
                // 不需要回执
                if (this.detail && this.detail.msgReceipt === 0) {
                    this.sendFreshReceipt();
                }
            });
        },
        sendFreshReceipt() {
            this.$axios({
                url: `/app/api/trainee/announce/sign-read/${this.$route.params.id}`
            }).then(() => {
                // 需要回执
                if (this.detail && this.detail.msgReceipt === 1) {
                    this.getFreshAnnounceDetail();
                }
            });
        }
    },
    mounted() {
        this.tcenter = this.$route.params.tcenter;
        this.getFreshAnnounceDetail();
    }
};
</script>

<style scoped>
    .detail-title{
        font-size: 20px;
        font-weight: bold;
        padding: 20px 15px;
    }
    .detail-time{
        color: #999999;
        padding: 0 15px;
        overflow: hidden;
        line-height: 15px;
    }
</style>
